import React, { useState } from 'react';
import { motion } from 'framer-motion';

const Business = () => {
  const [activeTab, setActiveTab] = useState(0);

  // 标签数据
  const tabs = [
    { id: 0, name: '社区' },
    { id: 1, name: '故事' },
    { id: 2, name: '电商' },
    { id: 3, name: '变现' },
    { id: 4, name: '福利' },
    { id: 5, name: '消息' },
    { id: 6, name: '我的' }
  ];

  // 板块内容数据
  const tabContents = [
    {
      title: '社区',
      description: '社区拥有海量精彩内容，采用智能推荐算法，个性化推荐优质内容;同时提供组件能力，可实现任务推广、商品购买，增加变现路径，提升变现效率。'
    },
    {
      title: '故事',
      description: '提供各类爆款任务推送和达人变现经验分享，掌握一手热门资讯，助力收益翻倍。'
    },
    {
      title: '电商',
      description: '包含京东、唯品会、拼多多、淘宝、美团、饿了么等国内知名电商和本地生活服务平台，提供商品分销、本地生活优惠、橱窗商品推广服务。'
    },
    {
      title: '变现',
      description: '找任务:海量高佣任务随心推广，全面覆盖变现场景，每个人都能找到适合自己的变现方式。\n\n找项目:提供独家变现渠道和营销解决方案，打造多元化轻创业生态。\n\n学变现:包含小说、短剧、电商等多类型赛道系统变现课程、达人故事和学习资源，新手也能快速上手变现。'
    },
    {
      title: '福利',
      description: '提供海量0成本赚金币任务，金币支持多渠道提现，轻松实现0门槛赚钱。'
    },
    {
      title: '消息',
      description: '提供IM即时通讯和官方爆款内容推荐，好内容立刻分享，不错过任何信息。'
    },
    {
      title: '我的',
      description: '支持管理查看个人主页，提供钱包提现、收益和团队数据可视化等服务，账户信息轻松管理。'
    }
  ];

  // 动画变体
  const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: 0.1
      }
    }
  };

  const itemVariants = {
    hidden: { opacity: 0, y: 20 },
    visible: {
      opacity: 1,
      y: 0,
      transition: {
        duration: 0.5
      }
    }
  };

  const tabContentVariants = {
    hidden: { opacity: 0, x: -20 },
    visible: {
      opacity: 1,
      x: 0,
      transition: {
        duration: 0.5
      }
    },
    exit: {
      opacity: 0,
      x: 20,
      transition: {
        duration: 0.3
      }
    }
  };

  return (
    <section id="business" className="py-24 bg-gradient-to-b from-white to-gray-50 w-full">
      <div className="max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* 标题区域 - 增强视觉层次 */}
        <motion.div
          className="text-center mb-20 relative"
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.8 }}
        >
          {/* 装饰性下划线 */}
          <div className="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-24 h-1 bg-[#345aff] rounded-full"></div>
          
          <h2 className="text-4xl md:text-5xl font-bold text-zinc-900 mb-6 relative z-10">
            创作猫
            <span className="text-[#345aff]"> 核心功能</span>
          </h2>
          
          <div className="max-w-3xl mx-auto relative">
            <p className="text-xl text-zinc-600">
              探索我们的多功能平台，为您提供全方位的创作与变现体验
            </p>
          </div>
        </motion.div>

        {/* 标签导航 - 增强视觉层次和交互反馈 */}
        <motion.div 
          className="grid grid-cols-7 gap-0 mb-16 w-full border-b border-gray-200" // 添加底部边框增强层次感
          variants={containerVariants}
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true }}
        >
          {tabs.map((tab) => (
            <motion.button
              key={tab.id}
              className={`relative w-full py-4 font-medium transition-all duration-300 ${
                activeTab === tab.id
                  ? 'text-[#345aff]'
                  : 'text-zinc-500 hover:text-zinc-700'
              }`}
              onClick={() => setActiveTab(tab.id)}
              variants={itemVariants}
              whileHover={{ scale: 1.02 }}
              whileTap={{ scale: 0.98 }}
            >
              {tab.name}
              {/* 活动标签指示器 */}
              {activeTab === tab.id && (
                <motion.div 
                  className="absolute bottom-0 left-0 right-0 h-1 bg-[#345aff]"
                  layoutId="activeTab"
                  initial={false}
                  transition={{
                    type: "spring",
                    stiffness: 500,
                    damping: 30
                  }}
                />
              )}
            </motion.button>
          ))}
        </motion.div>

        {/* 内容区域 - 宽屏设计 */}
        <div className="w-full">
          <motion.div
            className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center"
            key={activeTab}
            initial="hidden"
            animate="visible"
            exit="exit"
            variants={tabContentVariants}
          >
            {/* 左侧文案 - 增强层次结构 */}
            <motion.div
              className="order-2 lg:order-1 space-y-6 px-4 sm:px-6 lg:px-8"
              initial={{ opacity: 0, x: -30 }}
              whileInView={{ opacity: 1, x: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6, delay: 0.2 }}
            >
              <div className="flex items-center space-x-3 mb-2">
                <div className="w-10 h-1 bg-[#345aff] rounded-full"></div>
                <span className="text-sm font-semibold text-[#345aff] uppercase tracking-wider">
                  {tabContents[activeTab].title}
                </span>
              </div>
              
              <h3 className="text-3xl font-bold text-zinc-900">
                {tabContents[activeTab].title}
              </h3>
              
              <div className="relative">
                <div className="text-lg text-zinc-600 leading-relaxed whitespace-pre-line pl-4 border-l-2 border-gray-200">
                  {tabContents[activeTab].description}
                </div>
              </div>
              
              <motion.button
                className="mt-8 bg-[#345aff] text-white px-8 py-3 font-medium rounded-lg hover:bg-blue-600 transition-all duration-300 shadow-lg hover:shadow-xl flex items-center space-x-2"
                whileHover={{ scale: 1.05 }}
                whileTap={{ scale: 0.95 }}
              >
                <span>立即体验</span>
                <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                  <path fillRule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clipRule="evenodd" />
                </svg>
              </motion.button>
            </motion.div>

            {/* 右侧图片 - 固定宽度完整显示 */}
            <motion.div
              className="order-1 lg:order-2 w-full flex justify-center items-center bg-gray-50"
              initial={{ opacity: 0, x: 30 }}
              whileInView={{ opacity: 1, x: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6, delay: 0.3 }}
              style={{ height: '500px' }}
            >
              <img 
                src="/images/dtm02.png" 
                alt={tabContents[activeTab].title}
                className="max-w-full max-h-full object-contain"
              />
            </motion.div>
          </motion.div>
        </div>
      </div>
    </section>
  );
};

export default Business;